<!-- 机械中心数据部分 -->
<template>
  <div class="MechanicsContent">
    <div class="titleContent">
      <img src="./../../../../../public/img/mechanics/mechanicsTitleImg.png" class="mechanicsTitleImg">
      <div class="swiper_box">
        <!-- <swiper
          :options="swiperOption"
          ref="mySwiper"
          class="swiper_container"
          @slideChange="slideChange()"
        > -->
        <!-- 数据部分 -->
          <div class="swiper_slide">
              <router-link class="swiperItemBox" :to="{path:'/mechanicsInfoData',query:{idx:item.idx,currentIndex:2}}" v-for="(item,index) of list" :key="index">
                <div class="swiperTitleName">{{item.titleName}}</div>
             <div class="itemInfoBox">
                <div  class="itemStyle" v-for="(items,i) of item.itemName" :key="i">
                  <div>{{items}}{{i == item.itemName.length-1?'':','}}</div>
                </div>
              </div>
              <div class="overflowStyle">...</div>  
              <!-- swiper图片 -->
              <div class="swiperImgBox">
                <img :src="item.img" class="swiperImg" :style="{width:item.width+'px',height:item.height+'px'}">
              </div>
                </router-link>
          </div>
            <!-- <div
            class="swiper-pagination"
            slot="pagination">
            </div> -->
        <!-- </swiper> -->
      </div>
      <!-- <div class="businessCard">
        <div class="mechanicsImg">
          <div class="MechanicalOwner">优质机械主</div>
          <div class="heightStyle"></div>
          <div class="mechanicalLeftBox">
            <div class="Recommended">Recommended</div>
            <div class="machinery">machinery</div>
          </div>
        </div>
        <div class="rightBusiness">
          <div class="itemBox" v-for="(item,index) of businessCardList" :key="index">
            <div class="topBg">
              <img :src="item.img" class="iconBg">
              <div class="infoBg">资深认证</div>
            </div>
            <div class="hoverStyle">
            <div class="footerBg">
              <div class="footerBgTitle">{{item.titleName}}</div>
              <div class="footerAddress">{{item.address}}</div>
              <div class="footerPhone">{{item.phone}}</div>
              <div class="footerMailbox">{{item.mailbox}}</div>
              <div class="infoData">{{item.infoData}}</div>
              <div class="styleRgba"></div>
            </div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="footerListBox">
        <div class="rightBusiness1">
          <div class="itemBox" v-for="(item,indexs) of businessCardList1" :key="indexs">
            <div class="topBg">
              <img :src="item.img" class="iconBg">
              <div class="infoBg">资深认证</div>
            </div>
            <div class="footerBg">
              <div class="footerBgTitle">{{item.titleName}}</div>
              <div class="footerAddress">{{item.address}}</div>
              <div class="footerPhone">{{item.phone}}</div>
              <div class="footerMailbox">{{item.mailbox}}</div>
              <p class="infoData">{{item.infoData}}</p>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script >
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
// import引入的组件需要注入到对象中才能使用
components: {
  SwiperSlide,
  Swiper,
},
  data() {
 // 这里存放数据
    return {
      list:[
        {
          idx:1,
          titleName:'挖掘机械',
          itemName:['履带挖掘机','轮式挖掘机','加长臂挖掘机'],
          img:require('./../../../../../public/img/mechanics/wajueji.png'),
          // width:167,
          // height:115
        },
        {
          idx:3,
          titleName:'装载机械',
          itemName:['履带式推土机','装载机','轮胎式推土机','平地机'],
          img:require('./../../../../../public/img/mechanics/zhuangzaiji.png'),
          // width:170,
          // height:100
        },
        {
          idx:9,
          titleName:'自卸车',
          itemName:['工程自卸车','矿用自卸车',],
          img:require('./../../../../../public/img/mechanics/zixieche.png'),
          // width:131,
          // height:89
        },
        {
          idx:103,
          titleName:'高空作业机械',
          itemName:['高空作业车','电动施工吊篮'],
          img:require('./../../../../../public/img/mechanics/gaokongzuoye.png'),
          // width:192,
          // height:106
        },
        {
          idx:105,
          titleName:'压实机械',
          itemName:['冲击夯','蛙式夯实机','轮胎压路机'],
          img:require('./../../../../../public/img/mechanics/yashijixie.png'),
          // width:152,
          // height:102
        },
        {
          idx:10,
          titleName:'机动工业车辆',
          itemName:['洒水车','平板运输车','搬运车','面包车'],
          img:require('./../../../../../public/img/mechanics/jidonggongyeche.png'),
          // width:154,
          // height:104
        },
        {
          idx:5,
          titleName:'路面机械',
          itemName:['破碎镐','沥青搅拌设备','沥青摊铺机'],
          img:require('./../../../../../public/img/mechanics/yaluji.png'),
          // width:152,
          // height:99
        },
        {
          dix:7,
          titleName:'混凝土机械',
          itemName:['泵车','混凝土搅拌站','搅拌运输车','拖泵'],
          img:require('./../../../../../public/img/mechanics/hunningtu.png'),
          // width:171,
          // height:92
        },
      ],
      businessCardList:[
        {
          img:require('./../../../../../public/img/mechanics/feng.png'),
          titleName:'冯新斌',
          address:'乌鲁木齐市',
          phone:'150******89',
          mailbox:'service@honglonglong.net',
          infoData:'拥有挖掘机、起重机等机械，项目经验丰富，曾参与连霍高速新疆境内小草湖至乌鲁木齐段改扩建工程。',
        },
        {
          img:require('./../../../../../public/img/mechanics/jiang.png'),
          titleName:'姜宏立',
          address:'北京市',
          phone:'186******29',
          mailbox:'service@honglonglong.net',
          infoData:'拥有装载机、洒水车、起重机、自卸车、挖掘机等多种机械，曾参与北京通州、宋庄等 8 个维修改造、扩建、留白增绿工程项目。'
        },
        {
          img:require('./../../../../../public/img/mechanics/jiang.png'),
          titleName:'姜辉',
          address:'北京市',
          phone:'135******70',
          mailbox:'service@honglonglong.net',
          infoData:'拥有自卸车、挖掘机、洒水车等机械，曾参与北京通州区的环境整治、留白增绿、生态林建设、高速绿化、林木资源护养、道路改造等 11 个项目。'
        },
        {
          img:require('./../../../../../public/img/mechanics/jing.png'),
          titleName:'荆门市东宝区鹏晟机械设备租赁中心',
          address:'湖北省-荆门市',
          phone:'158******98',
          mailbox:'service@honglonglong.net',
          infoData:'经营范围包括机械设备租赁，装卸搬运服务，建筑材料批发兼零售。曾参与北京市住宅混合公建及基础教育等项目。'
        },
        {
          img:require('./../../../../../public/img/mechanics/ma.png'),
          titleName:'马谦',
          address:'北京市',
          phone:'139******99',
          mailbox:'service@honglonglong.net',
          infoData:'拥有洒水车、挖掘机、装载机、自卸车、推土机等机械，曾参与北京通州区绿化生态、平原造林、疫情防控、水管改造等项目。'
        },
        {
          img:require('./../../../../../public/img/mechanics/sui.png'),
          titleName:'隋祥',
          address:'吉林省-长春市',
          phone:'138******88',
          mailbox:'service@honglonglong.net',
          infoData:'拥有自卸车、起重机、平地机等机械，曾参与松原至通榆公路等多个标段。'
        },
      ],
      businessCardList1:[
        {
          img:require('./../../../../../public/img/mechanics/zhang.png'),
          titleName:'张波',
          address:'山西省-运城市',
          phone:'186******15',
          mailbox:'service@honglonglong.net',
          infoData:'拥有挖掘机、装载机、压路机、农用车等机械，曾参与阳泉市宁波北路建设工程等多个标段。'
        },
        {
          img:require('./../../../../../public/img/mechanics/guo.png'),
          titleName:'郭传亮',
          address:'安徽省-六安市',
          phone:'136******98',
          mailbox:'service@honglonglong.net',
          infoData:'拥有推土机、挖掘机、压路机等机械，曾参与安徽省六安市特色小镇 PPP 项目。'
        },
        {
          img:require('./../../../../../public/img/mechanics/gao.png'),
          titleName:'高念忠',
          address:'甘肃省-酒泉市',
          phone:'152******66',
          mailbox:'service@honglonglong.net',
          infoData:'拥有起重机械，曾参与甘肃省酒泉市金塔县中铁二十二局酒额铁路酒泉至东风段站项目。'
        },
        {
          img:require('./../../../../../public/img/mechanics/chen.png'),
          titleName:'陈建',
          address:'江苏省-徐州市',
          phone:'150******10',
          mailbox:'service@honglonglong.net',
          infoData:'拥有推土机、挖掘机、压路机、稳定土拌合机、装载机、平地机等机械，曾参与雄安新区起步区 2 号、3 号交通运输通道标段。'
        },
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable : true,
        },
        loop: false,
        slidesPerView: 4,//一屏显示三张
        slidesPerGroup : 4,//一屏滚动
      },
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
    slideChange(e) {
      const activeIndex = this.$refs.mySwiper.$swiper.activeIndex;
      console.log(activeIndex);
    },
    // goInfoData(idx){
    //   this.$router.push({path:'/mechanicsInfoData',query:{idx,currentIndex:2}})
    // },
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.MechanicsContent{
  padding-bottom: 100px;
  box-sizing: border-box;
}
.titleContent{
  width: 1180px;
  margin: 0 auto;
}
.mechanicsTitleImg{
  width: 325px;
  height: 68px;
  padding-top: 65px;
}
.swiper_container{
  padding-bottom: 50px;
  box-sizing: border-box;
  position: relative;
}
.swiper-pagination{
  position: absolute;
  bottom: 0;
}
.swiper_box{
  margin: 0px 10px 0 10px;
  width: 1200px;
}
.swiper_slide{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 40px;
}
.swiperItemBox{
  display: inline-block;
  width: 280px;
  height: 180px;
  background: #F7F8FA;
  border-radius: 4px 4px 0px 0px;
  position: relative;
  cursor: pointer;
  margin: 73px 10px 0 10px;
}
.swiperTitleName{
  padding-top: 22px;
  box-sizing: border-box;
  margin-left: 20px;
  color: #333;
  font-size: 14px;
}
.itemInfoBox{
  display: flex;
  margin-top: 6px;
  padding-left: 20px;
  box-sizing: border-box;
  color: #999;
  font-size: 12px;
  max-width: 251px;
  display: flex;
  flex-wrap: wrap;
  span{
    margin-right: 10px;
  }
}
.overflowStyle{
  margin-left: 20px;
  font-size: 12px;
  color: #999;
}
.swiperImgBox{
  position: absolute;
  bottom: -40px;
  right: 5px;
}
.swiperImg{
  width:167px;
  height:115px;
  transform: scale(1,1);  /*开始为原始大小*/
  -webkit-transform: scale3d(1.1,1.1); transition: .8s transform; 
  -webkit-transition: .8s transform;
}
.swiperImg:hover{
  transform: scale(1.1,1.1);  /*开始为原始大小*/
   -webkit-transform: scale3d(1.1,1.1); transition: .8s transform; 
   -webkit-transition: .8s transform;
}
.businessCard{
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.mechanicsImg{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/mechanics/mechanicsImg.png') no-repeat;
  background-size: 100%,100%;
  width: 282px;
  height: 825px;
  position: relative;
}
.MechanicalOwner{
  color: #fff;
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  padding-top: 44px;
  box-sizing: border-box;
  margin-left: 30px;
}
.heightStyle{
  width: 28px;
  height: 3px;
  background-color: #fff;
  margin-top: 10px;
  margin-left: 30px;
}
.mechanicalLeftBox{
  position: absolute;
  bottom: 52px;
  left: 30px;
}
.Recommended{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  font-family: PingFangSC-Semibold, PingFang SC;
}
.machinery{
  color: #fff;
  font-size: 20px;
}
.rightBusiness{
  width: 880px;
  display: flex;
  align-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
}
.rightBusiness1{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.itemBox{
  width: 280px;
  height: 402px;
  cursor: pointer;
}
.topBg{
  width: 100%;
  height: 242px;
  background: #F7F8FA;
  position: relative;
}
.iconBg{
  width: 102px;
  height: 102px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.infoBg{
  width: 88px;
  height: 32px;
  line-height: 32px;
  background: linear-gradient(136deg, #FFB492 0%, #FF7D59 100%);
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%,-50%);
}
// 动画部分
.footerBg{
  width: 100%;
  height: 160px;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(221, 221, 221, 0.5);
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.footerBg:hover{
	-webkit-transform: translate3d(0,-110px,0);
	transform: translate3d(0,-110px,0);
  width: 100%;
  height: 270px;
  padding-bottom: 100rpx;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(221, 221, 221, 0.5);
  border-radius: 0px 0px 4px 4px;
}
// 控制弹出层文字显示
.footerBg:hover .infoData{
  opacity: 1;
  -webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
  font-size: 12px;
  color: #999;
}
.infoData{
  font-size: 12px;
  color: #999;
  text-transform: none;
  width: 240px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
  margin: -5px auto 0 auto;
}
.footerBgTitle{
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 25px;
  box-sizing: border-box;
}
.footerAddress{
  font-size: 12px;
  color: #999;
  margin-left: 20px;
  margin-top: 6px;
}
.footerPhone{
  font-size: 12px;
  color: #999;
  margin-left: 20px;
  margin-top: 6px;
}
.footerMailbox{
  font-size: 12px;
  color: #999;
  margin-left: 20px;
  margin-top: 0px;
}
.footerListBox{
  width: 1180px;
  margin-top:20px;
}
</style>
